// 创建剪裁区
// 1.找到图片
let image = $('#image')
// 2.配置项 剪裁框的宽高。。。
let option = {
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
}
// 3.生成剪裁效果
image.cropper(option)

// 点击按钮选图片
$('button:contains("上")').on('click', function () {
    $('#file').trigger('click')
})

// 切换图片
// 当文件域图片切换了，更换剪裁的图片
$('#file').on('change', function () {
    let files = this.files
    if (files.length > 0) {
        let fileObj = files[0]
        let url = URL.createObjectURL(fileObj)
        // 更换剪裁区图片 (1.先销毁剪裁框2.更换图片3.在生成剪裁框)
        // image.attr('src', url)
        image.cropper('destroy').attr('src', url).cropper(option)
    }
})

// 点击确定，完成提交
$('button:contains("确定")').on('click', function () {
    // 剪裁图片
    let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 })
    // 把canvas转换成base64
    let base64 = canvas.toDataURL('image/jpeg', 0.3)
    $.ajax({
        type: 'POST',
        url: '/my/user/avatar',
        data: { avatar: base64 },
        success: function (res) {
            layer.msg(layer.message)
            if (res.status === 0) {
                window.parent.getInfo()
            }
        }
    })
})